<template>
    <page-header-wrapper :title="false">
      <a-card
        title="个人信息审核"
        :loading="loading"
      >
        <a-row type="flex" justify="start" align="middle">
          <a-col flex="100px">
            <a-avatar :src="checkDetail.image" :size="100" icon="user" />
          </a-col>
          <a-col flex="100px" :style="{ marginLeft: '30px' }">
            <h3>{{checkDetail.name}}</h3>
          </a-col>
        </a-row>
        <a-row style="margin-top: 40px;">
          <a-col :span="24">
            <a-descriptions
              :column="4"
            >
              <a-descriptions-item label="性别">{{checkDetail.gender}}</a-descriptions-item>
              <a-descriptions-item label="年龄">{{checkDetail.age}}</a-descriptions-item>
              <a-descriptions-item label="生日">{{checkDetail.birthday}}</a-descriptions-item>
              <a-descriptions-item label="身份证号">{{checkDetail.id_card}}</a-descriptions-item>
              <a-descriptions-item label="是否从事过知识产权行业">{{checkDetail.engaged_kp}}</a-descriptions-item>
              <a-descriptions-item label="是否已婚">{{checkDetail.married}}</a-descriptions-item>
            </a-descriptions>
            <a-divider />
            <a-descriptions
              :column="1"
            >
              <a-descriptions-item label="家庭住址">{{checkDetail.family_address}}</a-descriptions-item>
              <a-descriptions-item label="个人简介">{{checkDetail.personal_hobbies}}</a-descriptions-item>
            </a-descriptions>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="danger" @click="getMemberStatus">审核</a-button>
          </a-col>
        </a-row>
      </a-card>
      <a-modal
        title="编辑审核状态"
        v-model="visible"
        @ok="onSubmit"
        @cancel="() => this.passForm = {}"
      >
        <a-form-model
          ref="passForm"
          :model="passForm"
          :rules='passRules'
        >
          <a-form-model-item label="入职时间" extra="是否更改入职，不填默认为审核通过的日期" prop='hiredate'>
            <a-date-picker v-model="passForm.hiredate" valueFormat="YYYY-MM-DD" @change="onHiredate"></a-date-picker>
          </a-form-model-item>
          <a-form-model-item>
            <a-radio-group name="passRadio" v-model="passForm.check_status">
              <a-radio v-for="(item, index) in checkStatus" :key="index" :value="index" @change='radioChange'>
                {{item}}
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item>
            <a-textarea
              v-model="passForm.check_note"
              :autoSize="{
                minRows: 4,
                maxRows: 8
              }"
              placeholder="备注，此外：审核不过，请填写原因，不能为空"
              allow-clear
            />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </page-header-wrapper>
</template>

<script>
  import { checkDetail, getStatus, setStatus } from '@/api/member'

  export default {
    name: 'CheckDetail',
    data () {
      return {
        loading: false,
        uid: 0,
        visible: false,
        passRules: {
          hiredate: [{ required: true, message: '请选择入职日期', trigger: 'change' }]
        },
        passForm: {
          hiredate: null,
          check_status: '',
          check_note: ''
        },
        checkDetail: {},
        checkStatus: []
      }
    },
    activated () {
      this.checkDetail = {}
      const { uid } = this.$route.params
      this.uid = uid
      this.getDetail(uid)
    },
    methods: {
      getDetail (uid) {
        this.loading = true
        checkDetail(uid).then(res => {
          if (res.status === 0) {
            this.checkDetail = res.result.info
            this.loading = false
          }
        })
      },
      getMemberStatus () {
        getStatus(this.uid).then(res => {
          if (res.status === 0) {
            this.checkStatus = res.result.check_status_opts
            this.passForm = res.result.info
            this.passForm.uid = this.uid
            this.visible = true
          }
        })
      },
      setMemberStatus (appForm) {
        const infoForm = {}
        infoForm['info[check_note]'] = appForm.check_note
        infoForm['info[check_status]'] = appForm.check_status
        infoForm['info[hiredate]'] = appForm.hiredate
        infoForm['uid'] = appForm.uid
        setStatus(infoForm).then(res => {
          if (res.status === 0) {
            this.getDetail(this.uid)
          }
        })
      },
      onSubmit () {
        const app = this
        // const appForm = {}
        app.$refs.passForm.validate(valid => {
          if (valid) {
            if (app.passForm.check_status === '3') {
              if (app.passForm.check_note === '') {
                app.$info({
                  title: '审核未通过必须填写原因'
                })
                return false
              }
              // for (const k in app.passForm) {
              //   appForm['info[' + k + ']'] = app.passForm[k]
              // }
              app.setMemberStatus(app.passForm)
              app.visible = false
            } else {
              // for (const k in app.passForm) {
              //   appForm['info[' + k + ']'] = app.passForm[k]
              // }
              app.setMemberStatus(app.passForm)
              app.visible = false
            }
          } else {
            return false
          }
        })
      },
      onHiredate (date, dateString) {
        this.passForm.hiredate = dateString
      },
      radioChange () {
        this.passForm.check_note = ''
      }
    }
  }
</script>

<style scoped>

</style>
